<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<script>
    var t;
    function getAbsOffset(obj){
        function getAbsOffsetX(obj){
            var x = 0;
            if (obj){
                return x + obj.offsetLeft + getAbsOffsetX(obj.offsetParent);
            } else {
                return 0;
            }
        }
        function getAbsOffsetY(obj){
            var y = 0;
            if (obj){
                return y + obj.offsetTop + getAbsOffsetY(obj.offsetParent);
            } else {
                return 0;
            }
        }
        return {
            left:getAbsOffsetX(obj),
            top:getAbsOffsetY(obj),
        }
    }

    function getMouseInfo(obj,clientObj){
        var oOffsetInfo = getAbsOffset(obj);
        return {
            x:clientObj.clientX-oOffsetInfo.left,
            y:clientObj.clientY-oOffsetInfo.top,
        }
    }
    function createPoint(obj,mousePositon,type){
        var img = document.createElement('span');

        img.style.position = 'absolute';
        img.style.backgroundColor = 'red'
        img.style.width = '5px';
        img.style.height = '5px';
        img.style.borderRadius = '50%';
        img.style.top=mousePositon.y+'px';
        img.style.left=mousePositon.x+'px';
        obj.appendChild(img);
    }
    var box = document.getElementById('box')
    window.onload = function(){
        box.style.height = document.documentElement.clientHeight+'px';
       box.onmousedown = function(){
           box.onmousemove = function(e){
               var mousePosition = getMouseInfo(this,e);
               createPoint(this,mousePosition);
           }
       }
        box.onmouseup = function(){
            box.onmousemove = function(e){

            }
        }
    }

</script>
</body>
</html>